<template>
  <div class="RulelibraryFormCom">
    <jxtech-model-form ref='RuleModelFormRef' :service-api='rulelibraryServiceApi' primary-key='ruleCode' :form-data='RuleFormData' :rules='rules'
                       @add-success='RulelibraryFormComState.onAddSuccess' @update-success="RulelibraryFormComState.onUpdateSuccess"
                       :callback="RulelibraryFormComState.modelFormCallback" label-width="150px">
      <el-row>
        <el-col :span='24' :offset='0'>
          <el-card class="mb10">
            <template #header>
              <div class="jxtech-card-title">
                <span>表单数据</span>
              </div>
            </template>

            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="规则编码" prop="ruleCode">
                  <el-input placeholder="请输入规则编码" v-model="RuleFormData.ruleCode" disabled></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="是否有效" prop="ruleFalg">
                  <el-radio-group v-model="RuleFormData.ruleFalg">
                    <el-radio :label="1">有效</el-radio>
                    <el-radio :label="0">无效</el-radio>
                  </el-radio-group>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="业务域" prop="businessDomain">
                  <el-select v-model="RuleFormData.businessDomain" class="m-2" placeholder="请选择业务域" style="width: 100%;"
                             @change="RulelibraryFormComState.businesschange">
                    <el-option v-for="item in businessDomainoptions" :key="item.CODE_VALUE" :label="item.CODE_VALUE" :value="item.CODE_VALUE">
                    </el-option>
                  </el-select>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="系统名称" prop="systemName">
                  <el-input placeholder="请输入系统名称" v-model="RuleFormData.systemName"></el-input>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="字段中文名" prop="ruleColCh">
                  <el-input placeholder="请输入字段中文名" v-model="RuleFormData.ruleColCh"></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="字段英文名" prop="ruleColEn">
                  <el-input placeholder="请输入字段英文名" v-model="RuleFormData.ruleColEn"></el-input>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="表中文名" prop="ruleTableCh">
                  <el-input placeholder="请输入表中文名" v-model="RuleFormData.ruleTableCh"></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="表英文名" prop="ruleTableEn">
                  <el-input placeholder="请输入表英文名" v-model="RuleFormData.ruleTableEn"></el-input>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="评价指标" prop="ruleType">
                  <el-select v-model="RuleFormData.ruleType" class="m-2" placeholder="请选择评价指标" style="width: 100%;">
                    <el-option v-for="item in ruleTypeoptions" :key="item.CODE_VALUE" :label="item.CODE_VALUE" :value="item.CODE_VALUE">
                    </el-option>
                  </el-select>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="重要程度" prop="ruleImportant">
                  <el-select v-model="RuleFormData.ruleImportant" class="m-2" placeholder="请选择重要程度" style="width: 100%;">
                    <el-option v-for="item in ruleImportantoptions" :key="item.CODE_VALUE" :label="item.CODE_VALUE" :value="item.CODE_VALUE">
                    </el-option>
                  </el-select>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <jxtech-model-form-item label="校验规则名称" prop="ruleName">
                  <el-input placeholder="请输入校验规则名称" v-model="RuleFormData.ruleName"></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col :span="12">
                <jxtech-model-form-item label="备注" prop="ruleRemarks">
                  <el-input placeholder="请输入备注" v-model="RuleFormData.ruleRemarks" :rows="1" type="textarea" show-word-limit></el-input>
                </jxtech-model-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="22">
                <jxtech-model-form-item label="校验规则脚本" prop="ruleSql">
                  <el-input placeholder="请输入校验规则脚本" v-model="RuleFormData.ruleSql" :rows="4" type="textarea" show-word-limit></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col class="text-center" :span="2">
                <el-button type="success" @click="RulelibraryFormComState.TestSQLHandler(RuleFormData.ruleSql,'校验规则脚本')">
                  <jxtech-svg-icon icon="#icon-test" class="pointer"></jxtech-svg-icon>&nbsp;测 试
                </el-button>
              </el-col>

            </el-row>
            <el-row :gutter="24">
              <el-col :span="22">
                <jxtech-model-form-item label="统计总数脚本" prop="countSql">
                  <el-input placeholder="请输入统计总数脚本" v-model="RuleFormData.countSql" :rows="4" type="textarea" show-word-limit></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col class="text-center" :span="2">
                <el-button type="success" @click="RulelibraryFormComState.TestSQLHandler(RuleFormData.countSql,'统计总数脚本')">
                  <jxtech-svg-icon icon="#icon-test" class="pointer"></jxtech-svg-icon>&nbsp;测 试
                </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="22">
                <jxtech-model-form-item label="问题数据明细表列头" prop="problemDataOutSql">
                  <el-input placeholder="请输入问题数据明细表列头" v-model="RuleFormData.problemDataOutSql" :rows="4" type="textarea" show-word-limit></el-input>
                </jxtech-model-form-item>
              </el-col>
              <el-col class="text-center" :span="2">
                <el-button type="success" @click="RulelibraryFormComState.TestSQLHandler(RuleFormData.problemDataOutSql,'问题数据明细表列头')">
                  <jxtech-svg-icon icon="#icon-test" class="pointer"></jxtech-svg-icon>&nbsp;测 试
                </el-button>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </jxtech-model-form>
  </div>
</template>

<script lang="ts" setup>
import { log } from "console"
import { onMounted, reactive, ref, Ref } from "vue"
import rulelibraryServiceApi from "/@/api/personnel/bean/rulelibrary"
import dictionaryServiceApi from "/@/api/personnel/bean/dictionary"
import { ElNotification } from "element-plus"
import { useRouter } from "vue-router"
// 对外事件
const emit = defineEmits<{
  (e: "add-success", data: any, res: any): void //保存成功回调
  (e: "update-success", data: any, res: any): void //更新成功回调
}>()
// 对外参数
const props = defineProps({
  /**主键值 */
  ruleCode: String
})
// 实例对象
const RuleModelFormRef = ref()
// 表单数据
const RuleFormData: Ref<any> = ref({
  ruleCode: props.ruleCode,
  businessDomain: ""
})
const businessDomainoptions = ref([])
const ruleTypeoptions = ref([])
const ruleImportantoptions = ref([])
const rules = ref({
  ruleCode: [{ required: true, message: "请输入规则编码", trigger: "blur" }],
  ruleFalg: [{ required: true, message: "请选择是否有效", trigger: "change" }],
  businessDomain: [
    { required: true, message: "请选择业务域", trigger: "change" }
  ],
  systemName: [
    { required: true, message: "请输入系统名称", trigger: "change" }
  ],
  ruleColCh: [{ required: true, message: "请输入字段中文名", trigger: "blur" }],
  ruleColEn: [{ required: true, message: "请输入字段英文名", trigger: "blur" }],
  ruleTableCh: [{ required: true, message: "请输入表中文名", trigger: "blur" }],
  ruleTableEn: [{ required: true, message: "请输入表英文名", trigger: "blur" }],
  ruleType: [{ required: true, message: "请选择评价指标", trigger: "change" }],
  ruleImportant: [
    { required: true, message: "请选择重要程度", trigger: "change" }
  ],
  ruleName: [
    { required: true, message: "请输入校验规则名称", trigger: "blur" }
  ],
  ruleRemarks: [{ required: true, message: "请输入备注", trigger: "blur" }],
  ruleSql: [{ required: true, message: "请输入校验规则脚本", trigger: "blur" }],
  countSql: [
    { required: true, message: "请输入统计总数脚本", trigger: "blur" }
  ],
  problemDataOutSql: [
    { required: true, message: "请输入问题数据明细表列头", trigger: "blur" }
  ]
})
const router = useRouter()
const RulelibraryFormComState = reactive({
  onAddSuccess: (formData: any, res: any) => {
    emit("add-success", formData, res)
  },
  onUpdateSuccess: (formData: any, res: any) => {
    emit("update-success", formData, res)
  },
  TestSQLHandler: (value: any, text: any) => {
    if (!value) {
      return ElNotification({
        title: "错误",
        message: text + "不能为空",
        type: "error"
      })
    }
    rulelibraryServiceApi.TestSQL({ sql: value }).then((response: any) => {
      ElNotification({
        title: "信息",
        message: response.data.msg,
        type: "info"
      })
    })
  },
  initdictionary: () => {
    dictionaryServiceApi
      .queryCode({ code: "businessDomain" }, null)
      .then((response: any) => {
        businessDomainoptions.value = response.data
      })
    dictionaryServiceApi
      .queryCode({ code: "ruleType" }, null)
      .then((response: any) => {
        ruleTypeoptions.value = response.data
      })
    dictionaryServiceApi
      .queryCode({ code: "ruleImportant" }, null)
      .then((response: any) => {
        ruleImportantoptions.value = response.data
      })
  },
  modelFormCallback: {
    afterNewBean: (data: any) => {
      RuleFormData.value.businessDomain = "人力资源域"
      RulelibraryFormComState.initruleCode(RuleFormData.value.businessDomain)
    }
  },
  initruleCode: (text: any) => {
    rulelibraryServiceApi.selectID({ preID: text }).then((response: any) => {
      RuleFormData.value.ruleCode = response.data.msg
    })
  },
  businesschange(value: any) {
    RulelibraryFormComState.initruleCode(value)
  }
})
onMounted(() => {
  RulelibraryFormComState.initdictionary()
})
defineExpose({
  save: () => RuleModelFormRef.value.save()
})
</script>

<style lang="scss" scoped>
</style>
